<!--自定义按钮组件-->

<template>
  <div class="w-h-full">
    <div v-if="shade" class="shade"></div>
    <div class="custom-button-comp w-h-full"
         :style="Object.assign({
           borderWidth: component.compConfigData.borderWidth + 'px',
           borderColor: component.compConfigData.borderColor,
           borderStyle: component.compConfigData.borderStyle,

           borderTopLeftRadius: component.compConfigData.borderTopLeftRadius + 'px',
           borderTopRightRadius: component.compConfigData.borderTopRightRadius + 'px',
           borderBottomLeftRadius: component.compConfigData.borderBottomLeftRadius + 'px',
           borderBottomRightRadius: component.compConfigData.borderBottomRightRadius + 'px',

           /*textAlign: component.compConfigData.textAlign,*/
           lineHeight: component.compConfigData.lineHeight + 'px',

           backgroundImage: component.compConfigData.imageRelativePath ? 'url('+imageSrc+')': '',
           backgroundRepeat: component.compConfigData.imageRepeat ? component.compConfigData.imageRepeat: '',
           backgroundSize: component.compConfigData.imageSize ? component.compConfigData.imageSize: ''

         }, background, styleObject)"
         @click.stop="clickHandle"
         @mouseenter.stop="mouseenterHandle" @mouseleave.stop="mouseleaveHandle">

    <span class="text"
          :style="{
            fontSize: component.compConfigData.fontSize + 'px',
            color: component.compConfigData.color,

          }">{{component.compConfigData.text}}</span>

    </div>
  </div>
</template>

<script>
  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from "@/utils/PnDesigner";

  const _this = {
    name: 'CustomButtonComp',
    mixins: [FuncCompMixin],
    attr: {
      version: '1.5',
      configDataTemp: Object.assign({

        backgroundColor: '#2196f3',

        useShade: false,
        startColor: '#2979ff',
        endColor: '#18ffff',
        shadeAngle: 90,

        borderWidth: 0,
        borderColor: '#fff',
        borderStyle: 'solid',

        borderTopLeftRadius: 4,
        borderTopRightRadius: 4,
        borderBottomLeftRadius: 4,
        borderBottomRightRadius: 4,

        text: '按钮文本',
        fontSize: 18,
        color: '#fff',
        textAlign: 'left',
        lineHeight: 18,

        backgroundColorHover: '',
        textColorHover: '',
        textShadowHover: '',

        useLink: false,
        link: '',
        linkTarget: '_blank',

        imageRelativePath: '',
        imageRepeat: 'no-repeat',
        imageSize: '100% 100%',

        clickHandleScript: ''

      }, PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildMouseInteractionConfiguration())
    },
    data() {
      return {}
    },
    mounted() {
      this.init()
    },
    methods: {
      init () {
        this.runCustomGlobalJsCode()
      },
      clickHandle () {
        if (this.component.compConfigData.useLink) {
          this.$PnUtil.jumpLink(this.component.compConfigData.link + '', this.component.compConfigData.linkTarget)
        }else {
          this.$PnDesigner.launchMouseInteraction(this.component.compConfigData, 'click');
          eval(this.component.compConfigData.clickHandleScript)
        }
      },
      mouseenterHandle () {
        this.$PnDesigner.launchMouseInteraction(this.component.compConfigData, 'mouseenter');
      },
      mouseleaveHandle () {
        this.$PnDesigner.launchMouseInteraction(this.component.compConfigData, 'mouseleave');
      }
    },
    computed: {
      styleObject() {
        let obj = {};
        if (this.component.compConfigData.backgroundColorHover) {
          obj['--background-color-hover'] = this.component.compConfigData.backgroundColorHover
        }else {
          obj['--background-color-hover'] = this.component.compConfigData.backgroundColor
        }

        if (this.component.compConfigData.textColorHover) {
          obj['--text-color-hover'] = this.component.compConfigData.textColorHover
        }else {
          obj['--text-color-hover'] = this.component.compConfigData.color
        }

        if (this.component.compConfigData.textShadowHover) {
          obj['--text-shadow-hover'] = this.component.compConfigData.textShadowHover
        }

        return obj
      },
      background () {
        if (this.component.compConfigData.useShade) {
          return {
            background: 'linear-gradient('+this.component.compConfigData.shadeAngle+'deg, '+this.component.compConfigData.startColor+','+this.component.compConfigData.endColor+')'
          }
        }else {
          return {
            backgroundColor: this.component.compConfigData.backgroundColor
          }
        }
      },
      imageSrc () {
        return window.g.AXIOS_BASE_URL + this.component.compConfigData.imageRelativePath
      },
    }
  };

  export default _this
</script>

<style lang="less" scoped>
  .custom-button-comp {
    border-radius: 5px;
    cursor: pointer;
    padding: 0px;
    .text {
      width: 100%;
      height: 100%;
      /* 上下垂直居中 */
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;
    }
    //&:hover {
    //  background: var(--background-color-hover) !important;
    //  .text {
    //    color: var(--text-color-hover) !important;
    //    text-shadow: var(--text-shadow-hover) !important;
    //  }
    //}
    &:active {

    }
  }

</style>
